<style>
    :root {
        --primary: #4267B2;
        --primary-light: #E9EBF5;
        --secondary: #1DA1F2;
        --danger: #DC3545;
        --dark: #2D3436;
        --light: #F8F9FA;
        --gray: #636E72;
        --border: #DFE6E9;
        --shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
        --shadow-hover: 0 5px 15px rgba(0, 0, 0, 0.1);
    }

    body {
        font-family: 'Inter', system-ui, -apple-system, sans-serif;
        background-color: #F5F7FA;
        color: var(--dark);
        line-height: 1.6;
    }

    /* 主内容区 */
    .main-content {
        padding: 2rem 0;
    }

    /* 页面标题 */
    .page-title {
        margin-bottom: 1.5rem;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid var(--border);
    }

    .page-title h1 {
        font-size: 1.75rem;
        font-weight: 600;
        color: var(--dark);
    }

    /* 内容卡片样式 */
    .content-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .content-card {
        background-color: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: transform 0.3s, box-shadow 0.3s;
        position: relative;
    }

    .content-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-hover);
    }

    .content-card .card-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    .content-card .card-content {
        padding: 1.25rem;
    }

    .content-card .card-header {
        display: flex;
        align-items: center;
        margin-bottom: 1rem;
    }

    .content-card .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 0.75rem;
    }

    .content-card .user-info {
        flex: 1;
    }

    .content-card .user-name {
        font-weight: 600;
        font-size: 0.95rem;
        margin-bottom: 0;
    }

    .content-card .post-time {
        font-size: 0.8rem;
        color: var(--gray);
    }

    .content-card .card-title {
        font-size: 1.1rem;
        font-weight: 600;
        margin-bottom: 0.75rem;
        line-height: 1.4;
    }

    .content-card .card-text {
        color: var(--gray);
        font-size: 0.9rem;
        margin-bottom: 1rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .content-card .card-actions {
        display: flex;
        justify-content: space-between;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
        font-size: 0.85rem;
        color: var(--gray);
    }

    .content-card .action-item {
        display: flex;
        align-items: center;
        cursor: pointer;
        transition: color 0.2s;
    }

    .content-card .action-item:hover {
        color: var(--primary);
    }

    .content-card .action-item i {
        margin-right: 0.35rem;
    }

    .content-card .action-item.report-btn:hover {
        color: var(--danger);
    }

    /* 举报表单模态框 */
    .modal-content {
        border-radius: 12px;
        border: none;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
        overflow: hidden;
    }

    .modal-content .modal-header {
        border-bottom: 1px solid var(--border);
        padding: 1.25rem 1.5rem;
    }

    .modal-content .modal-title {
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--danger);
    }

    .modal-content .modal-body {
        padding: 1.5rem;
    }

    .modal-content .modal-footer {
        border-top: 1px solid var(--border);
        padding: 1rem 1.5rem;
        justify-content: flex-end;
        gap: 0.75rem;
    }

    /* 举报表单样式 */
    .modal-content .report-form-group {
        margin-bottom: 1.5rem;
    }

    .modal-content .report-form-label {
        display: block;
        margin-bottom: 0.75rem;
        font-weight: 500;
        color: var(--dark);
    }

    .modal-content .report-textarea {
        width: 100%;
        min-height: 120px;
        padding: 0.75rem;
        border-radius: 8px;
        border: 1px solid var(--border);
        resize: vertical;
        font-family: inherit;
        transition: all 0.2s;
    }

    .modal-content .report-textarea:focus {
        outline: none;
        border-color: var(--danger);
        box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.1);
    }

    .modal-content .report-hint {
        margin-top: 0.5rem;
        font-size: 0.85rem;
        color: var(--gray);
        text-align: right;
    }

    /* 举报原因选项 */
    .modal-content .report-reasons {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .modal-content .reason-option {
        flex: 1;
        min-width: 200px;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
    }

    .modal-content .reason-option:hover {
        border-color: var(--primary);
        background-color: var(--primary-light);
    }

    .modal-content .reason-option.selected {
        border-color: var(--danger);
        background-color: rgba(220, 53, 69, 0.05);
    }

    .modal-content .reason-option i {
        color: var(--danger);
        margin-right: 0.5rem;
    }

    .modal-content .reason-option p {
        margin: 0;
        font-size: 0.9rem;
    }

    /* 举报说明 */
    .modal-content .report-guidelines {
        background-color: var(--light);
        border-radius: 8px;
        padding: 1rem;
        margin-top: 1.5rem;
        font-size: 0.9rem;
    }

    .modal-content .report-guidelines h5 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
        color: var(--gray);
    }

    .modal-content .report-guidelines ul {
        margin: 0;
        padding-left: 1.25rem;
        color: var(--gray);
    }

    /* 举报成功提示 */
    .report-toast {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        padding: 0.75rem 1.5rem;
        border-radius: 4px;
        font-size: 0.9rem;
        z-index: 1000;
        opacity: 0;
        transition: opacity 0.3s;
        pointer-events: none;
    }

    .report-toast.show {
        opacity: 1;
    }

    /* 按钮样式 */
    .btn {
        padding: 0.6rem 1.25rem;
        border-radius: 6px;
        font-weight: 500;
        transition: all 0.2s;
    }

    .btn-danger {
        background-color: var(--danger);
        border-color: var(--danger);
        color: white;
    }

    .btn-danger:hover {
        background-color: #bb2d3b;
        border-color: #b02a37;
    }

    .btn-outline {
        background-color: transparent;
        border: 1px solid var(--border);
        color: var(--dark);
    }

    .btn-outline:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    /* 响应式设计 */
    @media (max-width: 768px) {

        .content-container {
            grid-template-columns: 1fr;
        }

        .modal-content .reason-option {
            min-width: 100%;
        }
    }
</style>


<div class="container main-content">
    <div class="page-title">
        <h1>推荐内容</h1>
    </div>

    <div class="content-container">
        <!-- 内容卡片 1 -->
        <div class="content-card">
            <img src="https://picsum.photos/800/600?random=10" alt="风景照片" class="card-image">
            <div class="card-content">
                <div class="card-header">
                    <img src="https://picsum.photos/100/100?random=101" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <p class="user-name">旅行爱好者</p>
                        <p class="post-time">2小时前</p>
                    </div>
                </div>

                <h3 class="card-title">分享一组令人惊叹的山川美景，大自然的鬼斧神工！</h3>
                <p class="card-text">这是我在最近的旅行中拍摄的照片，站在山顶俯瞰云海的那一刻，感觉所有的烦恼都烟消云散了...</p>

                <div class="card-actions">
                    <div class="action-item">
                        <i class="far fa-heart"></i> 248
                    </div>
                    <div class="action-item">
                        <i class="far fa-comment"></i> 36
                    </div>
                    <div class="action-item">
                        <i class="far fa-share-square"></i> 分享
                    </div>
                    <div class="action-item report-btn" data-bs-toggle="modal" data-bs-target="#reportModal"
                         data-post-id="12345"
                         data-post-title="分享一组令人惊叹的山川美景，大自然的鬼斧神工！">
                        <i class="fas fa-flag"></i> 举报
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容卡片 2 -->
        <div class="content-card">
            <img src="https://picsum.photos/800/600?random=11" alt="美食照片" class="card-image">
            <div class="card-content">
                <div class="card-header">
                    <img src="https://picsum.photos/100/100?random=102" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <p class="user-name">美食家小李</p>
                        <p class="post-time">5小时前</p>
                    </div>
                </div>

                <h3 class="card-title">周末在家尝试做的意大利面，味道竟然出乎意料的好！</h3>
                <p class="card-text">分享一下我的独家配方，简单易学，在家也能做出餐厅级别的意大利面，赶紧学起来吧...</p>

                <div class="card-actions">
                    <div class="action-item">
                        <i class="far fa-heart"></i> 186
                    </div>
                    <div class="action-item">
                        <i class="far fa-comment"></i> 42
                    </div>
                    <div class="action-item">
                        <i class="far fa-share-square"></i> 分享
                    </div>
                    <div class="action-item report-btn" data-bs-toggle="modal" data-bs-target="#reportModal"
                         data-post-id="12346"
                         data-post-title="周末在家尝试做的意大利面，味道竟然出乎意料的好！">
                        <i class="fas fa-flag"></i> 举报
                    </div>
                </div>
            </div>
        </div>

        <!-- 内容卡片 3 -->
        <div class="content-card">
            <img src="https://picsum.photos/800/600?random=12" alt="科技产品照片" class="card-image">
            <div class="card-content">
                <div class="card-header">
                    <img src="https://picsum.photos/100/100?random=103" alt="用户头像" class="user-avatar">
                    <div class="user-info">
                        <p class="user-name">科技测评师</p>
                        <p class="post-time">昨天</p>
                    </div>
                </div>

                <h3 class="card-title">最新款智能手机深度测评，这些功能让我惊艳！</h3>
                <p class="card-text">经过一周的深度使用，我对这款新手机有了全面了解，从性能到拍照，从续航到系统，全方位解析...</p>

                <div class="card-actions">
                    <div class="action-item">
                        <i class="far fa-heart"></i> 529
                    </div>
                    <div class="action-item">
                        <i class="far fa-comment"></i> 134
                    </div>
                    <div class="action-item">
                        <i class="far fa-share-square"></i> 分享
                    </div>
                    <div class="action-item report-btn" data-bs-toggle="modal" data-bs-target="#reportModal"
                         data-post-id="12347"
                         data-post-title="最新款智能手机深度测评，这些功能让我惊艳！">
                        <i class="fas fa-flag"></i> 举报
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 举报表单模态框 -->
<div class="modal fade" id="reportModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-flag me-2"></i> 举报内容</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="reportForm">
                    <input type="hidden" id="reportPostId">

                    <div class="report-form-group">
                        <label class="report-form-label">你要举报的内容</label>
                        <div class="bg-light p-3 rounded border border-secondary-subtle">
                            <p id="reportPostTitle" class="mb-0"></p>
                        </div>
                    </div>

                    <div class="report-form-group">
                        <label class="report-form-label">选择举报原因（可多选）</label>
                        <div class="report-reasons">
                            <div class="reason-option" data-reason="spam">
                                <p><i class="fas fa-exclamation-circle"></i> 垃圾信息或广告</p>
                            </div>
                            <div class="reason-option" data-reason="inappropriate">
                                <p><i class="fas fa-exclamation-circle"></i> 不适当或低俗内容</p>
                            </div>
                            <div class="reason-option" data-reason="violence">
                                <p><i class="fas fa-exclamation-circle"></i> 暴力或有害内容</p>
                            </div>
                            <div class="reason-option" data-reason="harassment">
                                <p><i class="fas fa-exclamation-circle"></i> 骚扰或欺凌</p>
                            </div>
                            <div class="reason-option" data-reason="copyright">
                                <p><i class="fas fa-exclamation-circle"></i> 侵犯版权</p>
                            </div>
                            <div class="reason-option" data-reason="misinformation">
                                <p><i class="fas fa-exclamation-circle"></i> 虚假信息</p>
                            </div>
                            <div class="reason-option" data-reason="other">
                                <p><i class="fas fa-exclamation-circle"></i> 其他原因</p>
                            </div>
                        </div>
                    </div>

                    <div class="report-form-group">
                        <label class="report-form-label" for="reportDetails">详细说明（可选）</label>
                        <textarea class="report-textarea" id="reportDetails" placeholder="请详细描述你举报的原因..."></textarea>
                        <div class="report-hint">0/500</div>
                    </div>

                    <div class="report-guidelines">
                        <h5>举报须知</h5>
                        <ul>
                            <li>虚假举报可能导致你的账号受到处罚</li>
                            <li>我们会在24小时内处理你的举报</li>
                            <li>举报后你可以在"通知"中查看处理结果</li>
                        </ul>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmReportBtn">提交举报</button>
            </div>
        </div>
    </div>
</div>

<!-- 举报成功提示框 -->
<div class="report-toast" id="reportToast">举报已提交，我们会尽快处理！</div>


<script>
	document.addEventListener('DOMContentLoaded', function () {
		// 获取DOM元素
		const reportModal = new bootstrap.Modal(document.getElementById('reportModal'));
		const reportPostIdInput = document.getElementById('reportPostId');
		const reportPostTitleElement = document.getElementById('reportPostTitle');
		const reportDetailsTextarea = document.getElementById('reportDetails');
		const reportHintElement = document.querySelector('.report-hint');
		const confirmReportBtn = document.getElementById('confirmReportBtn');
		const reportToast = document.getElementById('reportToast');
		const reasonOptions = document.querySelectorAll('.reason-option');
		const selectedReasons = new Set();

		// 打开举报模态框时初始化数据
		document.querySelectorAll('.report-btn').forEach(btn => {
			btn.addEventListener('click', function () {
				const postId = this.getAttribute('data-post-id');
				const postTitle = this.getAttribute('data-post-title');

				// 重置表单
				reportPostIdInput.value = postId;
				reportPostTitleElement.textContent = postTitle;
				reportDetailsTextarea.value = '';
				reportHintElement.textContent = '0/500';

				// 重置选中状态
				reasonOptions.forEach(option => {
					option.classList.remove('selected');
				});
				selectedReasons.clear();
			});
		});

		// 详细说明字数限制
		reportDetailsTextarea.addEventListener('input', function () {
			const maxLength = 500;
			let value = this.value;

			if (value.length > maxLength) {
				value = value.substring(0, maxLength);
				this.value = value;
			}

			reportHintElement.textContent = `${value.length}/${maxLength}`;
		});

		// 选择举报原因
		reasonOptions.forEach(option => {
			option.addEventListener('click', function () {
				const reason = this.getAttribute('data-reason');

				if (selectedReasons.has(reason)) {
					// 取消选择
					selectedReasons.delete(reason);
					this.classList.remove('selected');
				} else {
					// 选中
					selectedReasons.add(reason);
					this.classList.add('selected');
				}
			});
		});

		// 提交举报
		confirmReportBtn.addEventListener('click', function () {
			if (selectedReasons.size === 0) {
				alert('请至少选择一个举报原因');
				return;
			}

			const postId = reportPostIdInput.value;
			const details = reportDetailsTextarea.value;
			const reasons = Array.from(selectedReasons);

			// 模拟提交举报
			console.log(`举报内容 ID: ${postId}`);
			console.log(`举报原因: ${reasons.join(', ')}`);
			console.log(`详细说明: ${details}`);

			// 在实际项目中，这里会发送API请求提交举报
			// fetch('/api/report', {
			//     method: 'POST',
			//     body: JSON.stringify({ postId, reasons, details }),
			//     headers: { 'Content-Type': 'application/json' }
			// })

			// 显示提示信息
			reportToast.classList.add('show');

			// 关闭模态框
			reportModal.hide();

			// 3秒后隐藏提示信息
			setTimeout(() => {
				reportToast.classList.remove('show');
			}, 3000);
		});

		// 点赞功能
		const likeButtons = document.querySelectorAll('.action-item .far.fa-heart');
		likeButtons.forEach(button => {
			button.addEventListener('click', function (e) {
				e.stopPropagation();
				const actionItem = this.parentElement;
				const countText = actionItem.textContent.trim();
				let count = parseInt(countText.split(' ')[1]);

				if (this.classList.contains('far')) {
					// 未点赞状态，点击后变为已点赞
					this.classList.remove('far');
					this.classList.add('fas', 'text-danger');
					actionItem.innerHTML = `<i class="fas fa-heart text-danger"></i> ${count + 1}`;
				} else {
					// 已点赞状态，点击后取消点赞
					this.classList.remove('fas', 'text-danger');
					this.classList.add('far');
					actionItem.innerHTML = `<i class="far fa-heart"></i> ${count - 1}`;
				}
			});
		});
	});
</script>

    
